<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>图书管理系统</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <%--有冲突--%>
    <%--    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>--%>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    <script language="JavaScript">
        function isEmpty(obj) {
            if (typeof obj == "undefined" || obj == null || obj == "") {
                return true;
            } else {
                return false;
            }
        }

        function addRow(id, name, price, author) {
            $('#table_inner').append(
                $('<tr class="inner_row"></tr>').append(
                    $('<th scope="row"></th>').text(id),
                    $('<td></td>').text(name),
                    $('<td></td>').text(price),
                    $('<td></td>').text(author)
                )
            );
        }

        //为每行添加选中功能
        function bindSelected() {
            $('tr.inner_row').click(function () {
                $('tr.inner_row').each(function () {
                    $(this).removeClass('selected');
                });
                $(this).addClass('selected');
            });
        }

        //异步初始化表
        function initTable() {
            $.ajax({
                url: "./book/queryAll",
                data: {},
                datatype: "json",
                type: "post",
                success: function (data) {
                    if (data.length === 0) {
                        alert("系统中没有图书记录");
                        return
                    }
                    $('#table_inner').empty();//清空表重新添加
                    $.each(data, function (i, item) {
                            addRow(item.id, item.name, item.price, item.author);
                        }
                    );
                    bindSelected();
                }
            })
        }

        $(document).ready(function () {
            initTable();
            $('#id').attr("disabled", "");
            //新建事件
            $("#btn_new_book").click(function () {
                $('#model_title').text('新建图书记录');
                $('#id').val("");
                $('#book_name').val("");
                $('#book_price').val("");
                $('#book_author').val("");
                $('#id').attr("placeholder", "主键自增");
                $('#modal_book').modal('show');
            });

            //修改事件
            $("#btn_alter_book").click(function () {
                if ($('tr.selected').length != 0) {
                    $('#model_title').text('修改图书记录');
                    var child = $('tr.selected').children();
                    $('#id').val(child[0].innerText);
                    $('#book_name').val(child[1].innerText);
                    $('#book_price').val(child[2].innerText);
                    $('#book_author').val(child[3].innerText);
                    $('#modal_book').modal('show');
                } else {
                    alert("请先选择一行");
                }
            });

            //删除事件
            $("#btn_del_book").click(function () {
                if ($('tr.selected').length != 0) {
                    $('#modal_del').modal('show');
                } else {
                    alert("请先选择一行");
                }
            });

            //搜索事件
            $("#btn_search_book").click(function () {
                $('#modal_search').modal('show');
            });

            //新建和更新提交
            $('#update_submit').click(function () {
                var title = $('#model_title').text();
                var id = $('#id').val();
                var name = $('#book_name').val();
                var price = $('#book_price').val();
                var author = $('#book_author').val();
                if (isEmpty(name) || isEmpty(price) || isEmpty(author)) {
                    alert("请不要留空字段");
                    return;
                }
                $('#modal_book').modal('hide');
                $.ajax({
                    url: title === "新建图书记录" ? "./book/addBook" : "./book/updateBook",
                    data: JSON.stringify({
                        "id": title === "新建图书记录" ? 1 : id,
                        "name": name,
                        "price": price,
                        "author": author
                    }),
                    datatype: "json",
                    type: "post",
                    success: function (data) {
                        if (data.status === "true") {
                            //重新拉取
                            location.reload(true);
                        }
                    }
                });
            });

            //删除提交
            $('#del_submit').click(function () {
                var child = $('tr.selected').children();
                $('#modal_del').modal('hide');
                $.ajax({
                    url: "./book/delBook",
                    data: {
                        "id": child[0].innerText
                    },
                    datatype: "json",
                    type: "post",
                    success: function (data) {
                        if (data.status === "true") {
                            //重新拉取
                            location.reload(true);
                        }
                    }
                });
            });

            $('.search-item').click(function () {
                $('#search_method').text($(this).text());
            });

            //查找图书
            $('#search_submit').click(function () {
                var content = $('#search_text').val();
                $('#modal_search').modal('hide');
                if (isEmpty(content)) {
                    alert("请输入要查找的内容");
                } else {
                    $.ajax({
                        url: $('#search_method').text() === "按书名搜索" ? "./search/byBookName" : "./search/byAuthor",
                        data: {
                            "text": content
                        },
                        datatype: "json",
                        type: "post",
                        success: function (data) {
                            if (data.length === 0) {
                                alert("没有相关图书记录");
                                return
                            }
                            $('#table_inner').empty();//清空表重新添加
                            $.each(data, function (i, item) {
                                    addRow(item.id, item.name, item.price, item.author);
                                }
                            );
                            bindSelected();
                        }
                    });
                }
            });
        });
    </script>
    <style type="text/css">
        .selected {
            background: darkgray;
        }
    </style>
</head>
<body>
<div class="container" align="center">
    <h1 class="text-center">图书管理系统</h1>
    <br/>
    <div class="row row-cols-4">
        <div class="col">
            <button type="button" class="btn btn-warning" id="btn_new_book">新建记录</button>
        </div>
        <div class="col">
            <button type="button" class="btn btn-info" id="btn_alter_book">修改记录</button>
        </div>
        <div class="col">
            <button type="button" class="btn btn-danger" id="btn_del_book">删除记录</button>
        </div>
        <div class="col">
            <button type="button" class="btn btn-success" id="btn_search_book">图书搜索</button>
        </div>
    </div>
    <br/>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">编号</th>
            <th scope="col">书名</th>
            <th scope="col">价格</th>
            <th scope="col">作者</th>
        </tr>
        </thead>
        <tbody id="table_inner">
        <tr class="inner_row">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr class="inner_row">
            <th scope="row">2</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        </tbody>
    </table>

</div>

<div class="modal" tabindex="-1" role="dialog" id="modal_book">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="model_title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">编号</span>
                        </div>
                        <input id="id" type="number" aria-label="First name" class="form-control">
                    </div>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">书名</span>
                        </div>
                        <input id="book_name" type="text" aria-label="First name" class="form-control">
                    </div>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">价格</span>
                        </div>
                        <input id="book_price" type="number" aria-label="First name" class="form-control">
                    </div>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">作者</span>
                        </div>
                        <input id="book_author" type="text" aria-label="First name" class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="update_submit" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modal_del">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除图书</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">是否确认要删除当前选中行记录？</span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="del_submit" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modal_search">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">搜索图书</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <button class="btn btn-outline-secondary dropdown-toggle" type="button"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                    id="search_method">按书名搜索
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item search-item" href="#">按书名搜索</a>
                                <a class="dropdown-item search-item" href="#">按作者搜索</a>
                            </div>
                        </div>
                        <input id="search_text" type="text" class="form-control"
                               aria-label="Text input with dropdown button">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="search_submit" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

